<template>
  <div class="register">
    <div class="rg_left">
      <div class="left_img">
        <img src="../assets/login.jpg"/>
      </div>
    </div>
    <div class="rg_form">

        <p style="margin-left: 550px; ">
            <el-link type="warning" href="#/login" target="_self">返回登录</el-link>
        </p>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="用户名:" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户名" autocomplete="off" class="rg_inp"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="ruleForm.email" autocomplete="off"  placeholder="例如:hs@163.com" class="rg_inp"></el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="userPhone">
          <el-input v-model="ruleForm.userPhone" autocomplete="off" class="rg_inp" placeholder="不少于11位数字"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="不少于3位字符" class="rg_inp"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"  placeholder="两次密码要一致" class="rg_inp"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 40px;">
          <el-button type="warning" @click="submitForm('ruleForm')">立即注册</el-button>
          <el-button type="info" plain @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>

<script>
  export default {
    name: 'Register',
    data() {
      var checkName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('用户名不能为空'));
        } else {
          callback();
        }
      };
      var checkEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('邮箱不能为空'));
        } else {
          var reg_email = /^\w+@\w+\.\w+$/;
          //判断
          var flag = reg_email.test(value);
          if(!flag){
            callback(new Error('请输入正确的邮箱'));
          }else{
              callback();
          }

        }
      };
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        setTimeout(() => {
          var reg_phoneNum = /^\w{11}$/;
          var f = reg_phoneNum.test(value);
          if (!f) {
            callback(new Error('请输入正确格式的电话号码'));
          }else {
              callback();
            }
        });
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          var reg_password = /^\w{3,20}$/;
          var flag = reg_password.test(value);
          if(!flag){
            callback(new Error('密码长度不能小于3'));
          }
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          userName: "",
          userNo: "",
          email: "",
          userPhone: "",
          pass: '',
          checkPass: '',
        },
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          userPhone: [{
            validator: checkPhone,
            trigger: 'blur'
          }],
          userName:[{
            validator:checkName,
            trigger: 'blur'
          }],
          email:[{
            validator:checkEmail,
            trigger:'blur'
          }]
        },


      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post("/user/register",{
              userName:this.ruleForm.userName,
              userPhone:this.ruleForm.userPhone,
              userPassword:this.ruleForm.pass,
              email:this.ruleForm.email,
            }).then(resp=>{
              alert(resp.data.message)
              if(resp.data.code==200){
                this.$router.push("/login");
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },


    },
    created() {

    }
  }
</script>


<style scoped>
  .register{
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    background-image: url("../assets/bg.jpg");
  }

  .rg_left{
    margin-top: 130px;
    margin-left: 143px;
    z-index: 1;
    position: absolute;
  }
  .left_img img{
    /* opacity: 0.5; */
 /*   filter: blur(3px); */
      height: 300px;
  }
  .left_img{
    height: 300px;
    width: 228px;
    overflow: hidden;
  }

  .rg_form{
    position: relative;
    z-index: 2;
    background-color: rgba(255, 250, 240,0.9);
    width: 50%;
    padding: 20px;
    margin: 70px 370px ;


  }
  .rg_inp{
    width: 320px;

  }

</style>
